<script setup>
import {onMounted, ref} from "vue";
import {createVhost, deleteVhost, listVhost} from "../../../http/rabbitmq/vhost.js";
import {rabbitmqStore} from "../../../stores/counter.js";

let vhostTableData = ref([])

let vhostForm = ref({
  "name": "",
  "default_queue_type": "classic",
  "description": "",
  "tags": ""
})
let showVhostForm = ref(false)
let vhostUpdate = ref(false)

function showVhostCreate() {
  showVhostForm.value = true
  vhostUpdate.value = false
}

function handleVhostSave() {
  handleVhostCreate()
}

function handleVhostCreate() {
  createVhost(vhostForm.value).then(response => {
    handleVhostList()
    showVhostForm.value = false
  })
  vhostForm.value = {
    "": "/",
    "type": "direct",
    "durable": "true",
    "auto_delete": "false",
    "internal": "false"
  }
}

function handleVhostDelete(row) {
  deleteVhost(row).then(response => {
    handleVhostList()
    showVhostForm.value = false
  })
}

function handleVhostList() {
  listVhost().then(response => {
    vhostTableData.value = response
  })
}

onMounted(() => {
  handleVhostList()
})

</script>

<template>
  <div style="display: flex; flex-flow: column nowrap; width: 100%; height: 100%; overflow: hidden;">
    <div style="display: flex; flex-flow: row nowrap; align-items: center; height: 40px;">
      <el-form :inline="true" style="height: 30px">
        <el-form-item label="Name">
          <el-input clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleVhostList">Search</el-button>
          <el-button type="primary" @click="showVhostCreate({})">New</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
        highlight-current-row
        @row-click="handleVhostTableRowClick"
        :data="vhostTableData" border style="width: 100%;">
      <el-table-column prop="name" label="name" min-width="100"/>
      <el-table-column prop="cluster_state" label="cluster_state" width="120" show-overflow-tooltip>
        <template #default="scope">
          <el-tooltip placement="left-start">
            <template #content>
              <div v-for="(value, key) in scope.row.cluster_state">
                {{ key }} : {{ value }}
              </div>
            </template>
            <el-tag type="primary">state</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="Messages">
        <el-table-column prop="messages_ready" label="Ready" width="70" />
        <el-table-column prop="messages_unacknowledged" label="Unacked" width="90" />
        <el-table-column prop="messages" label="Total" width="80" />
      </el-table-column>

      <el-table-column label="Network">
        <el-table-column prop="messages_ready" label="From client" width="110" />
        <el-table-column prop="messages_unacknowledged" label="To client" width="90" />
      </el-table-column>

      <el-table-column label="Message rates">
        <el-table-column prop="messages_ready" label="publish" width="80" />
        <el-table-column prop="messages_unacknowledged" label="deliver / get" width="110" />
      </el-table-column>

      <el-table-column label="operations" width="100" fixed="right">
        <template #default="scope">
          <el-popconfirm
              width="230"
              hide-icon
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleVhostDelete(scope.row)"
              :title="'是否删除Vhost [ ' + scope.row.name + ' ] ？'">
            <template #reference>
              <el-button type="danger">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog title="vhost manage" v-model="showVhostForm" :close-on-click-modal="false" label-width="160px">
    <el-form ref="form" :model="vhostForm" label-width="160px">
      <el-form-item label="名称">
        <el-input v-model="vhostForm.name"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="vhostForm.default_queue_type">
          <el-option
              v-for="item in rabbitmqStore().queueType"
              :key="item.ukId"
              :label="item.name"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleVhostSave">Save</el-button>
        <el-button @click="showVhostForm = false">Cancel</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<style scoped>

</style>